<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { hotSpotsApi } from "@/api";
const router = useRouter();
const mobileEmit = defineEmits(["change"]);
// 项目地区所属州 1.美洲 2.欧洲 3.亚洲 4.大洋洲 5.非洲
const spotsList = ref([]);
const nav = (url) => {
  router.push(url);
  mobileEmit("change");
};
onMounted(() => {
  hotSpotsApi().then((res) => {
    const keys = Object.keys(res);
    keys.forEach((key) => {
      spotsList.value.push({
        name:
          key == 1
            ? "美洲"
            : key == 2
            ? "欧洲"
            : key == 3
            ? "亚洲"
            : key == 4
            ? "大洋洲"
            : "非洲",
        list: res[key],
      });
    });
  });
});
</script>
<template>
  <div class="w-full flex flex-col gap-5 lg:flex-row">
    <div
      class="flex-1 lg:pl-10 border-r border-dashed border-[#e7d6b8] lg:last:border-0"
      v-for="item in spotsList"
      :key="item.name"
    >
      <div class="text-[18px] mb-3">{{ item.name }}</div>
      <div class="flex flex-wrap lg:flex-col gap-2 items-start">
        <div
          class="cursor-pointer hover:text-default"
          v-for="gj in item?.list"
          :key="gj.id"
          @click="nav(`/hotSpots?id=${gj.id}&name=${gj.project_area_name}`)"
        >
          {{ gj.project_area_name }}
        </div>
      </div>
    </div>
  </div>
</template>
